<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>管理员登录</title>
    <link rel="stylesheet" href="./res/layui/css/layui.css">
    <style>
        * {
            border-radius: 0 !important;
        }

        .login-box {
            margin-top: 150px;
        }

        .login-panel {
            padding: 10px;
            background: #fff;
        }
    </style>
</head>
<body class="layui-bg-gray">
<!--导航条-->
<ul class="layui-nav layui-bg-blue">
    <li class="layui-nav-item">
        <a href="#" class="layui-logo">
            <img src="./res/images/logo.png" height="80px" alt="">
        </a>
    </li>
</ul>

<!--登录/注册框-->
<div class="layui-container login-box">
    <div class="layui-row">
        <div class="layui-col-md4 layui-col-md-offset4 login-panel">
            <div class="layui-tab layui-tab-brief">
                <ul class="layui-tab-title">
                    <li class="layui-this">管理员登录</li>
                </ul>
                <div class="layui-tab-content">
                    <!--登录tab-->
                    <div class="layui-tab-item layui-show">
                        <form class="layui-form layui-form-pane" action="login">
                            <div class="layui-form-item">
                                <label class="layui-form-label">
                                    <i class="layui-icon layui-icon-username"></i>
                                </label>
                                <div class="layui-input-block">
                                    <input type="text" name="username" class="layui-input" placeholder="请输入账号"
                                           required lay-verify="required" lay-vertype="tips" lay-reqtext="请输入账号">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">
                                    <i class="layui-icon layui-icon-password"></i>
                                </label>
                                <div class="layui-input-block">
                                    <input type="password" name="password" class="layui-input" placeholder="请输入密码"
                                           required lay-verify="required" lay-vertype="tips" lay-reqtext="请输入密码"
                                           autocomplete="off">
                                </div>
                            </div>
                            <div class="layui-form-item" style="display: flex; align-items: center; justify-content: space-between;">
                                <input type="checkbox" name="save" class="layui-bg-blue" title="保存一周" lay-skin="primary">
                                <a href="/register.html" class="layui-btn-primary" style="margin-left: auto; color: #007bff; text-decoration: underline;">去注册</a>
                            </div>
                            <div class="layui-form-item">
                                <button type="button" class="layui-btn layui-btn-normal layui-btn-fluid" lay-submit
                                        lay-filter="formLogin">登录
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div style="text-align: center;margin-top: 10px;">&copy;湖北商贸学院</div>
</div>

<script src="./res/layui/layui.js"></script>
<script>
    layui.use(function () {
        var ele = layui.element;
        var form = layui.form;
        var $ = layui.jquery;

        //为表单绑定一个提交事件
        form.on('submit(formLogin)', function (data) {
            /*layer.msg(JSON.stringify(data.field),function(){
                location.href='main.html'
            });*/
            //获取表单数据
            let formData = data.field
            //发送网络请求到服务端
            $.get('/admin/login', formData, function (resp) {
                if (resp.code !== 0) {
                    layer.alert(resp.msg, {icon: 2})
                } else {
                    //提示完信息之后执行回调（页面重定向）
                    layer.msg(resp.msg, function () {
                        location.href = 'main.html'
                    })
                }
            })
            return false;
        })

    })
</script>
</body>
</html>